$(function () {
    // 获取类名
    let gister = document.querySelector('.gister');
    let code = document.querySelector('.one');
    let phone = document.querySelector('.tow');
    //    注册移入事件
    gister.addEventListener('mouseover', function () {
        // 隐藏
        phone.style.opacity = '0'
        // 位移
        code.style.margin = ' 65px 102px 25px 102px'
        code.style.transition = '500ms'
        phone.style.transition = '300ms'
        code.style.transform = 'easeout'
        phone.style.transform = 'ease-in'
    })
    // 移出事件
    gister.addEventListener('mouseout', function () {
        //显示
        phone.style.opacity = '1'
        // 位移
        code.style.margin = '65px 25px 42px 29px'
        code.style.transform = 'ease-in'
        code.style.transition = '300ms'
        phone.style.transition = '600ms'
        phone.style.transform = 'easeout'
    })
    let regli = document.querySelectorAll('.register li')
    let child = document.querySelectorAll('.child')
    console.log(regli, child);
    let register = function () {
        // 定义变量保存索引
        let oldIndex = 0
        regli.forEach(function (item, index) {
            item.addEventListener('click', function () {
                // 清除样式
                regli[oldIndex].classList.remove('active')
                // 显示对应菜单
                item.classList.add('active')
                // 清除样式
                child[oldIndex].classList.remove('on')
                // 显示对应内容
                child[index].classList.add('on')
                // 赋值
                oldIndex = index;
            })
        })

    }
    register()//输出
    let user = document.querySelector('.user')
    let pwd = document.querySelector('.pwd')
    let userHint = document.querySelector('.user-hint')
    let pwdHint = document.querySelector('.pwd-hint')
    console.log(userHint, pwdHint);
    // 定义标杆对象
    let flag = {
        user: false,
        pwd: false
    }
    // 注册失焦事件
    user.addEventListener('blur', function () {
        //    获取输入值
        let userVal = user.value;
        // 获取定义规则
        let userRsg = /^[a-zA-z]\w{5,12}$/;
        // 检验是否符合规则
        let bool = userRsg.test(userVal)
        // 验证
        if (bool) {
            // 为真时
            userHint.innerHTML = '';
            user.style.borderColor = '#ccc';
            user = true;
        } else {
            // 为假时
            userHint.innerHTML = '帐户名错误 请输入6-12位以字母开头的字母和数字';
            user.style.border = '1px solid red';
            user = false;
        }
    })
    // 注册失焦事件
    pwd.addEventListener('blur', function () {
        //    获取输入值
        let pwdVal = pwd.value;
          // 获取定义规则
        let pwdRsg = /^[a-zA-z]\w{5,12}$/;
         // 检验是否符合规则
        let bool = pwdRsg.test(pwdVal)
         // 验证
        if (bool) {
              // 为真时
            pwdHint.innerHTML = '';
            pwd.style.borderColor = '#ccc';
            pwd = true;
        } else {
             // 为假时
            pwdHint.innerHTML = '密码错误 请输入6-12位以字母开头的字母和数字';
            pwd.style.border = '1px solid red';
            pwd = false;
        }
    })
    // 获取标签
    let regform = document.querySelector('.regform')
//    注册按钮事件
    regform.addEventListener('submit', function (event) {
        // 当账户为假时
        if (flag.user === false) {
            userHint.innerHTML = '帐户名错误 请输入6-12位以字母开头的字母和数字';
            user.style.border = '1px solid red';
            event.preventDefault();
        }
           // 当密码为假时
        if (flag.pwd === false) {
            pwdHint.innerHTML = '密码错误 请输入6-12位以字母开头的字母数字';
            pwd.style.border = '1px solid red';
            event.preventDefault();
        }
    })



    //尾部
})